	<#assign ctx = request.contextPath>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="${ctx}/assets/materialize/css/materialize.min.css" media="screen,projection" />
    <!-- Bootstrap Styles-->
	<#if (Session.configParam)??>
		<style>
			*{
				font-family: "${Session.configParam.fontFamily!""}";
				font-size: ${Session.configParam.fontSize!16}px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="${ctx+'/assets/css/bootstrap_'+Session.configParam.fontSize+'.css'}">
	<#else >
    	<link rel="stylesheet" type="text/css" href="${ctx}/assets/css/bootstrap_16.css">
	</#if>
    <!-- FontAwesome Styles-->
    <link href="${ctx}/assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="${ctx}/assets/css/custom-styles.css" rel="stylesheet" />


<style type="text/css">
.card .card-content,.card .card-action{
	padding:10px;
}
.card.horizontal.cardIcon .card-image i {
    margin-top: 10%;
}
.boxShadow{
 box-shadow: -2px 2px 5px 3px #3d9094;
}


</style>
</head>

<body>
  <div class="container">
	<div class="row" style="margin-top: 30px;margin-bottom: 0px;">
	    <div class="col-md-3">
			<div class="card horizontal cardIcon waves-effect waves-dark boxShadow">
				<div class="card-image">
					<i class="fa fa-tasks fa-4x"></i>
				</div>
				<div class="card-stacked">
					<div class="card-content">
						<strong> 任务：5件</strong>
					</div>
					<div class="card-action">
						<strong> Show  <i class="fa fa-eye fa-x" style="color: blue;"></i> </strong>
					</div>
				</div>
			</div>
		</div>
	    <div class="col-md-3">
			<div class="card horizontal cardIcon waves-effect waves-dark boxShadow">
				<div class="card-image orange">
					<i class="fa fa-envelope fa-4x"></i>
				</div>
				<div class="card-stacked">
					<div class="card-content">
						<strong> 邮件：4封</strong>
					</div>
					<div class="card-action">
						<strong> Show  <i class="fa fa-eye fa-x" style="color: blue;"></i> </strong>
					</div>
				</div>
			</div>
	    </div>
	    <div class="col-md-3">
			<div class="card horizontal cardIcon waves-effect waves-dark boxShadow">
				<div class="card-image red">
					<i class="fa fa-clock-o fa-4x"></i>
				</div>
				<div class="card-stacked">
					<div class="card-content">
						<strong> 公告：3条 </strong>
					</div>
					<div class="card-action">
						<strong> Show  <i class="fa fa-eye fa-x" style="color: blue;"></i> </strong>
					</div>
				</div>
			</div>
	    </div>
	    <div class="col-md-3">
			<div class="card horizontal cardIcon waves-effect waves-dark boxShadow">
				<div class="card-image blue">
				<i class="fa fa-comments fa-4x"></i>
				</div>
				<div class="card-stacked">
					<div class="card-content">
						<strong> 评论：8条</strong>
					</div>
					<div class="card-action">
						<strong> Show  <i class="fa fa-eye fa-x" style="color: blue;"></i> </strong>
					</div>
				</div>
			</div>
	    </div>
	</div>

	<div class="row" style="margin-bottom: 0px;">
		<div class="col-md-5">
			<div class="card  boxShadow">
				<div class="card-action">
					<b>邮件列表</b>
				</div>
				<div class="card-image">
					<div class="collection">
						<a href="#!" class="collection-item">
							GitHub
							<span class="new badge red" data-badge-caption="">未读</span>
						</a>
						<a href="#!" class="collection-item">
							程序员论坛
							<span class="new badge red" data-badge-caption="">未读</span>						</a>
						<a href="#!" class="collection-item">
							Xth8013@qq.com
							<span class="new badge red" data-badge-caption="">未读</span>						</a>
						<a href="#!" class="collection-item">
							GitHub
							<span class="new badge red" data-badge-caption="">未读</span>						</a>
						<a href="#!" class="collection-item">
							Xth8013@qq.com
							<span class="new badge green" data-badge-caption="">已读</span>
						</a>
						<a href="#!" class="collection-item">
							GitHub
							<span class="new badge green" data-badge-caption="">已读</span>
						</a>
					</div>
				</div>

			</div>

		</div>
		<div class="col-md-7">
			<div class="card  boxShadow">
				<div class="card-action">
					<b>公告列表</b>
				</div>
				<div class="card-image">
					<ul class="collection">
						<li class="collection-item avatar">
							<i class="material-icons circle green">insert_chart</i>
							<span class="title">Angular来了</span>
							<p> “Angular2.0视频教程”来了!这是第一个完整版的Angular 2.0系列中文视频教程...</p>
							<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
						</li>
						<li class="collection-item avatar">
							<i class="material-icons circle">folder</i>
							<span class="title">R语言</span>
							<p>R语言实现广义加性模型(GAM） GAM模型 当因变量和自变量不呈线性关系时 ,可用广义相加模型（ GAM）... </p>
							<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
						</li>
						<li class="collection-item avatar">
							<i class="material-icons circle red">play_arrow</i>
							<span class="title">大数据与人工智能</span>
							<p>金融科技3.0时代 大数据和人工智能成新引擎...</p>
							<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="${ctx}/assets/js/jquery-1.10.2.js"></script>
    <script src="${ctx}/assets/js/bootstrap.min.js"></script>
	<script src="${ctx}/assets/materialize/js/materialize.min.js"></script>
</body>

</html>